/*
 * @Author: yuanxiang 
 * @Date: 2018-05-09 16:52:47 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-11-21 14:36:31
 */
<template>
<bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
  <div slot="main">
        <sel-date class="cyySelDateCon" @onTime='onTime'></sel-date>
        <img class="cyyOutViewLogo" src="../../../../../static/img/cyy/cyyLogo.png">
        <!-- <div class="mapCon">
                <cyy-map v-model="mapData" :placeData="netWorkAdd" :areaData="[]"></cyy-map>
        </div> -->
        <div class="row topCon">
              <el-row class="cyyViewBox">
          <el-col class="row cyyViewxBottomBox" :xl="24" :sm="24" :lg="24" :md="24">
            <div class="cyyViewxBottomItem">
              <div class="itemTopText">累计营收总额(元)</div>
                <b class="boldFont">
                  <i-count-up :startVal="startVal" :endVal="endVal.sumOrderAmount" :decimals="decimals" :duration="duration" :options="options" />
                </b>
            </div>
            <div class="cyyViewxBottomItem">
              <div class="itemTopText">累计收件单量(件)</div>
                <b class="boldFont">
                  <i-count-up :startVal="startVal" :endVal="endVal.sumOrderCount" :decimals="decimals" :duration="duration" :options="options" />
                </b>
            </div>
            <div class="cyyViewxBottomItem">
              <div class="itemTopText">平台用户量(人)</div>
                <b class="boldFont">
                  <i-count-up :startVal="startVal" :endVal="endVal.sumPlatformUserCount" :decimals="decimals" :duration="duration" :options="options" />
                </b>
            </div>
            <div class="row cyyViewxBottomItem">
              <el-row style="width:90%">
                <el-col :xl="13" :sm="13" :lg="13" :md="13">
                    <div class="itemTopText">今日营业额(元)</div>
                    <b class="boldFont">
                      <i-count-up :startVal="startVal" :endVal="endVal.todayOrderAmount" :decimals="decimals" :duration="duration" :options="options" />
                    </b>
                </el-col>
                <el-col :xl="11" :sm="11" :lg="11" :md="11">
                  <div class="itemTopText">今日收件量(件)</div>
                  <b class="boldFont">
                    <i-count-up :startVal="startVal" :endVal="endVal.todayOrderCount" :decimals="decimals" :duration="duration" :options="options" />
                  </b>
                  <!-- <div class="itemTopText-mini">今日收件量(件)</div>
                  <b class="boldFont-mini boldFont">
                    <i-count-up :startVal="startVal" :endVal="endVal.todayOrderCount" :decimals="decimals" :duration="duration" :options="options" />
                  </b> -->
                </el-col>
              </el-row>
             
            </div>
          </el-col>
        </el-row>
        </div>
        <div class="centerLeftCon">
          <chart-lay-out :showLine="false">
            <span slot="title">网点月度收派件统计</span>
            <bar-charts slot="main" v-model="shopPickArr" :chartStyle="'min-height:230px;height: 260px;'" :option="shopPickOption"></bar-charts>
          </chart-lay-out>
        </div>
        <div class="centerRightCon">
          <chart-lay-out :showLine="false">
            <span slot="title">各网点营收金额统计</span>
            <bar-chart slot="main" v-model="brachesMoneyArr" :option="brachesMoneyOption" :chartStyle="'min-height:200px;height:260px;'"></bar-chart>
          </chart-lay-out>
        </div>
        <div class="centerCenterCon">
            <div style="width:100%;">
                <cyy-map v-model="mapData" :placeData="netWorkAdd" :areaData="[]"></cyy-map>
            </div>
        </div>
        <div class="row bottomCon">
          <el-row class="cyyViewxBottomBoxBottom">
            <el-col :xl="8" :sm="8" :lg="8" :md="8">
              <chart-lay-out>
                <span slot="title">累计客户统计</span>
                <pie-chart slot="main" v-model="sumCustumerArr" :chartStyle="'min-height:200px;height:260px;'"></pie-chart>
              </chart-lay-out>
            </el-col>
            <el-col :xl="8" :sm="8" :lg="8" :md="8">
              <div class="lineRes">
                <chart-lay-out>
                  <span slot="title">网点问题订单及投诉件对比</span>
                  <bar-charts slot="main" v-model="questionArr" :option="{color:['#0c43fd','#8d4cfd']}"></bar-charts>
                </chart-lay-out>
              </div>
            </el-col>
              <el-col :xl="8" :sm="8" :lg="8" :md="8">
                <chart-lay-out>
                  <span slot="title">转合作快递业务占比</span>
                  <pie-chart slot="main" v-model="courierAccountArr" :option="{color:['#0c43fd','#8d4cfd']}"></pie-chart>
                </chart-lay-out>
              </el-col>
      
        </el-row>
        </div>
  </div>
  </bg-lay-out>
</template>
<script>
import chart from "@/components/Charts/newChart";
import chartLayOut from "@/components/Charts/chartLayOut";
import barCharts from "@/components/Charts/barCharts";
import barChart from "@/components/Charts/barChart";
import lineChart from "@/components/Charts/lineChart";
import pieChart from "@/components/Charts/pieChart";
import ICountUp from "vue-countup-v2";
import {
  GetDataByDoubleTarget,
  GetDataByTargetForTwo,
  GetDataProfileInfoForHousing,
  GetLogisticsCollectionList,
  GetDateNetworkList
} from "@/api/cyy/index";
import bgLayOut from "@/components/bgLayOut/index";
import cyyMap from "@/components/cyy/cyyMap";
import selDate from "@/components/cyy/selDate";
export default {
  name: "sellAnalysis",
  components: {
    chart,
    ICountUp,
    bgLayOut,
    barCharts,
    barChart,
    lineChart,
    pieChart,
    selDate,
    cyyMap,
    chartLayOut
  },
  data() {
    return {
      brachesMoneyOption: {
        exchange: true,
        grid: {
          width: "75%",
          left: "18%"
        }
      },
      shopPickOption: {
        grid: {
          left: "18%"
        },
        labelDefault: 0
      },
      statisticalTime: "",
      netWorkAdd: [], // 产业园网点数据
      mapData: [], // 地图数据
      brachesMoneyArr: [], // 网点金额
      courierAccountArr: [], // 合作快递业务占比
      sumCustumerArr: [], // 累计客户统计
      shopPickArr: [], // 网点收派
      questionArr: [], // 问题订单及投诉件
      questionOption: [],
      dealAcerageOption: {
        color: "#da34fb",
        startColor: "rgba(218,52,251,0.2)",
        lineIconId: 1
      },
      dealTrendOption: {
        color: "#0c43fd",
        startColor: "rgba(12,67,253,0.2)",
        lineIconId: 0,
        sumName: "成交量"
      },
      dealAreaOption: {
        color: "rgb(47,240,210)",
        startColor: "rgba(47,240,210,0.2)",
        lineIconId: 2,
        sumName: "成交面积"
      },
      areaStatisticsVal: 0,
      projectProgressArr: [], // 工程进度
      receivableAccountArr: [], // 应收账款
      dealType: "28001",
      dealTypeArr: [
        {
          label: "住宅",
          value: "28001"
        },
        {
          label: "商铺",
          value: "28002"
        },
        {
          label: "储藏间",
          value: "28003"
        },
        {
          label: "车位",
          value: "28004"
        }
      ], // 成交类型
      dealAceragePriceData: [], // 成交均价走势
      dealTrendData: [], // 成交量趋势
      dealAreaData: [], // 成交面积趋势
      volumeMoney: 0, //  累计成交金额
      volumeMoneyData: [], // 成交金额
      volumeData: [], // 成交量
      volumeTotal: 0, // 累计成交量
      defaultTimeType: "3010", // 查询timetype
      areaStatisticsOption: [], // 成交面积统计
      stockAnalysisArr: [], // 存量分析
      endVal: {
        sumOrderAmount: 0, // 累计营收总额 ,
        sumOrderCount: 0, // 累计订单总数 ,
        sumPlatformUserCount: 0, // 累计平台客户 ,
        todayOrderAmount: 0, // 今日营业额 ,
        todayOrderCount: 0 // 今日订单数
      },
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // 产业园网点数据
    async fetchNetWorkAdd() {
      try {
        const params = {
          statisticalTime: this.statisticalTime
        };
        const res = await GetDateNetworkList(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          const arr = [];
          result.forEach(item => {
            var obj = {
              name: "",
              value: []
            };
            obj.name = item.netPointName;
            obj.value = [item.lng, item.lat];
            obj.netPointCount = item.netPointCount; // 发单量
            obj.netPointAmount = item.netPointAmount; // 营业额

            arr.push(obj);
          });
          this.$set(this, "netWorkAdd", arr);
        }
      } catch (error) {
        console.log(error);
      }
    },
    onTime(res) {
      this.$set(this, "statisticalTime", res);
      this.fetchData();
    },
    // 地图，收发快件
    async fetchSendReceive() {
      try {
        const params = {
          statisticalTime: this.statisticalTime
        };
        const res = await GetLogisticsCollectionList(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "mapData", result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取产业园汇总信息
    async fetchDataProfileInfoForHousing() {
      try {
        const res = await GetDataProfileInfoForHousing();
        if (res.data.code === "0") {
          this.$set(this, "endVal", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 网点金额
    async fetchBranchesMoney() {
      try {
        const params = {
          statisticalTime: this.statisticalTime,
          queryType: "28001"
        };
        const res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          const resData = res.data.result;
          if (resData.length !== 0) {
            this.$set(this, "brachesMoneyArr", resData);
          }
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 合作快递业务占比
    async fetchCourierAccount() {
      try {
        const params = {
          statisticalTime: this.statisticalTime,
          queryType: "28004"
        };
        const res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          const resData = res.data.result;
          this.$set(this, "courierAccountArr", resData);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 累计客户统计
    async fetchSumCustumer() {
      try {
        const params = {
          statisticalTime: this.statisticalTime,
          queryType: "28003"
        };
        const res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          const resData = res.data.result;
          if (resData.length > 0) {
            this.$set(this, "sumCustumerArr", resData);
          }
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 问题订单及投诉
    async fetchQuestion() {
      try {
        const params = {
          statisticalTime: this.statisticalTime,
          queryType: "28005"
        };
        var res = await GetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          let result = res.data.result;
          if (typeof result === "object") {
            result = [];
          }
          // var resData = [
          //   { name: "问题订单", list: [] },
          //   { name: "投诉件", list: [] }
          // ];
          // resData.forEach((resItem, resId) => {
          //   result.forEach((item, id) => {
          //     if (resId === 0) {
          //       // 问题订单
          //       const obj = {
          //         name: item.name,
          //         value: item.value1
          //       };
          //       resItem.list.push(obj);
          //     } else {
          //       // 投诉件
          //       const obj = {
          //         name: item.name,
          //         value: item.value2
          //       };
          //       resItem.list.push(obj);
          //     }
          //   });
          // });
          this.$set(this, "questionArr", result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 网点收派
    async fetchShopPick() {
      try {
        const params = {
          statisticalTime: this.statisticalTime,
          queryType: "28002"
        };
        var res = await GetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "shopPickArr", result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    fetchData() {
      this.fetchShopPick(); // 网点收派统计
      this.fetchNetWorkAdd(); // 产业园网点数据
      this.fetchQuestion(); // 问题订单及投诉
      this.fetchSumCustumer(); // 累计客户统计
      this.fetchCourierAccount(); // 合作快递业务占比
      this.fetchBranchesMoney(); // 网点金额占比
      this.fetchDataProfileInfoForHousing(); // 获取产业园汇总信息
      this.fetchSendReceive(); // 收发快件，地图
    }
  }
};
</script>
<style>
@import "../../../../styles/element-ui/select.css";
.lineRes .noDataCon-identi {
  position: relative !important;
}
</style>
<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.bg4Con {
  @include flex-dc-ic;
  @include absoluteAllSides;
  width: 100%;
  height: 1080px;
}
.cyyOutViewLogo {
  position: absolute;
  top: 36px;
  width: 225px;
  height: 30px;
  right: 50px;
  z-index: 99;
}
.cyySelDateCon {
  width: 300px;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 99;
}
.mapCon {
  position: fixed;
  top: 0;
  right: 0;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.topCon {
  position: absolute;
  left: 50px;
  top: 92px;
  justify-content: space-around;
  align-items: center;
  /* width: 1860px;
  height: 193px; */
  /* background-image: url("../../../../../static/img/gq/neibu_top.png"); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.topCon .item {
  justify-content: space-around;
  width: 25%;
}
.topCon .text span {
  font-size: 15px;
  margin-left: 10px;
}
.topCon .text {
  font-size: 25px;
}
.topCon .item .number span {
  font-size: 60px;
}
.centerLeftCon {
  position: absolute;
  left: 50px;
  top: 290px;
  width: 524px;
  height: 370px;
  /* padding: 10px 0px; */
  @include moduleBg(bg_500x412);
}
.bottomCon {
  position: absolute;
  left: 50px;
  top: 660px;
  color: #2ff0d2;
  /* width: 439px;
  height: 363px; */
  margin-top: 20px;
  /* background: url("../../../../../static/img/gq/xiaoshou.png") left top
    no-repeat; */
  background-size: 100% 100%;
}
.centerRightCon {
  position: absolute;
  right: 18px;
  top: 290px;
  width: 524px;
  height: 370px;
  padding: 10px 0px;
  @include moduleBg(bg_500x412);
}
.centerCenterCon {
  position: absolute;
  right: 557px;
  top: 290px;
  width: 772px;
  height: 370px;
  @include moduleBg(bg_778x391);
}
.topCon-5 {
  @include flex-jc;
  width: calc(100% / 4);
  height: 370px;
  padding: 30px;
  margin-top: 20pt;
  margin-left: 2px;
  margin-right: 20px;
  @include moduleBg(bg_347x393);
  color: #2ff0d2;
}
.itemTop-tit {
  width: 100%;
  text-align: left;
}
.itemTop-val {
  width: 100%;
  margin-top: 40px;
}
.itemTop-val-row {
  margin-top: 40px;
  width: 100%;
}
.itemTop-val-row .item {
  width: 49%;
  display: inline-block;
}
.itemTop-val-row .item-3 {
  width: 32%;
  display: inline-block;
}
.itemTop-val-row .item-3 .itemTopText,
.itemTop-val-row .item .itemTopText {
  font-size: 16px;
  margin-left: 10px;
}
.itemTop-val-row .item-3 .boldFont span,
.itemTop-val-row .item .boldFont span {
  font-size: 30px;
  margin-left: 10px;
}
.itemTopText {
  font-size: 20px;
}
.itemTopText-1 {
  font-size: 20px;
  margin-top: 90px;
}

.dcLineImg {
  width: 1780px;
  margin-left: 20px;
  height: 8px;
  color: #2ff0d2;
  @include bgImg(minLine);
}
.chartLine {
  width: 1px;
  height: 340px;
  background: rgba(49, 206, 230, 0.2);
  position: absolute;
  right: 0;
  top: 10%;
}
.minTopLeftCon {
  position: relative;
  margin-top: 10px;
}
.topRightLLine {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 12pt;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}
.topCon-5 span {
  font-size: 50px;
  line-height: 60px;
  margin-top: 2px;
}
.topRightCon {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 1813px;
  margin-top: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x792);
}
.itemTop {
  text-align: center;
  color: #2ff0d2;
}
.changeCen-i {
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-top: 6px;
  margin-right: 6px;
  background-color: #2ff0d2;
}
/* 当月锁货量统计选项 */
.selCon {
  margin-right: 55px;
}

/* 自定义flex */
.midCon-dc {
  display: flex;
  margin-left: 15pt;
  margin-top: 15px;
  flex-direction: column;
  justify-content: space-between;
  width: 1820px;
  height: 792px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x792);
}
.topRightLTopTitleLine-dc {
  width: 3px;
  height: 14px;
  margin-top: 9px;
  background: #2ff0d2;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
  color: #2ff0d2;
}
.topRightTextCon {
  display: flex;
}
.dcTopRightCon {
  position: absolute;
  right: 55px;
}
.dcTopRightCon .boldFont {
  font-size: 20px;
}

.itemTopText-mini {
  font-size: 16px;
}
.cyyViewBoxCenter {
  width: 100%;
  z-index: 100;
  margin: 15px 0px 20px 20px;
}
.cyyViewBoxCenter .cyyCenterViewLeftBox {
  width: 524px;
  height: 370px;
  padding: 10px 0px;
  @include moduleBg(bg_500x412);
}
.cyyViewBoxCenter .cyyCenterViewCenterBox {
  width: 742px;
  height: 370px;
  padding: 10px 0px;
  /* background: url("../../../../../static/img/cyy/cyy_m.png") left top no-repeat; */
  background-size: 100% 100%;
  box-sizing: border-box;
  margin: 0px 15px;
}
.cyyViewxBottomBoxBottom {
  text-align: center;
  /* margin: 0px 0px 20px 20px; */
  width: 1850px;
  height: 370px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x393);
}
.cyyViewxBottomBoxBottom .cyyViewxBottomItemBottom {
  width: 100%;
  align-items: center;
}

.cyyViewBox .cyyViewxBottomBox {
  text-align: center;
  /* margin: 15px 0px 0px 20px; */
  width: 1850px;
  height: 180px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x213);
}
.cyyViewBox .cyyViewxBottomBox .cyyViewxBottomItem {
  @include flex-dc-ic-jc;
  width: 100%;
  height: 80%;
  @include border(1px, rgba(#2ff0d2, 0.2), right);
}
.cyyViewBox .cyyViewxBottomBox .cyyViewxBottomItem .itemTopText {
  font-size: 20px;
}
.cyyViewBox .cyyViewxBottomBox .cyyViewxBottomItem .boldFont {
  font-size: 50px;
  line-height: 60px;
  margin-top: 2px;
}
.cyyViewBox .cyyViewxBottomBox .cyyViewxBottomItem .boldFont-mini {
  font-size: 30px;
  line-height: 40px;
  margin-top: 2px;
}
</style>